<template>
  <el-drawer
    model-value="dialogVisible"
    :title="dialogTitle"
    width="30%"
    @close="handleClose"
  >
   <div class="buttons-container">
      <el-checkbox v-model="allCheck" @change="allCheckHandler"
        >全选/反选</el-checkbox
      >
      <el-checkbox v-model="allExpanded" @change="allExpandedHandler"
        >{{ allExpanded ? "展开" : "折叠" }}
      </el-checkbox>
    </div>
    <el-tree
      ref="treeRef"
      :data="menuData"
      show-checkbox
      :default-expand-all="false"
      node-key="id"
      highlight-current
      :props="defaultProps"
      :check-strictly="true"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script>
export default {
  name: "menutree",
};
</script>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, nextTick } from "vue";
import http from "@/utils/request";
import { ElMessage } from "element-plus";
import { treeToArray } from "@/utils";

const props = defineProps({
  roleId: {
    type: Number,
    default: -1,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
});
const emits = defineEmits(["update:modelValue"]);
const treeRef = ref(null);
const menuData = ref([]);
const allExpanded = ref(true);
const allCheck = ref(false);
const allCheckHandler = (e) => {
  let ids = [];
  if (e) {
    treeToArray(menuData.value).forEach((item) => {
      ids.push(item.id);
    });
    treeRef.value?.setCheckedKeys(ids);
  } else {
    treeRef.value?.setCheckedKeys([]);
  }
};
const allExpandedHandler = (e) => {
  if (treeRef.value) {
    if (!e) {
      Object.values(treeRef.value.store.nodesMap).forEach((v) => v.expand());
    } else {
      Object.values(treeRef.value.store.nodesMap).forEach((v) => v.collapse());
    }
  }
};
const defaultProps = ref({
  children: "children",
  label: "name",
});
const handleClose = () => {
  emits("update:modelValue", false);
};
const initMenuList = async () => {
  const res = await http.get("sys/menu/treeList");
  const data = res.data;
  if (data.code == 200) {
    menuData.value = data.data.treeMenu;
  }
};
const handleConfirm = async () => {
    console.log(" treeRef.value.getCheckedKeys", treeRef.value.getCheckedKeys);
  const res = await http.post(`sys/role/setMenuIds/`, {
    roleId: props.roleId,
    menuIds: treeRef.value.getCheckedKeys(),
  });
  const data = res.data;
  if (data.code == 200) {
    handleClose();
    ElMessage({
      type: "success",
      message: data.msg,
    });
  } else {
    ElMessage({
      type: "error",
      message: data.msg,
    });
  }
};
watch(
  () => props.dialogVisible,
  async (newValue) => {
    if (!newValue) {
      treeRef.value.setCheckedKeys([]);
    } else {
      const res = await http.get(`sys/role/getMenuIds/${props.roleId}`);
      const data = res.data;
      if (data.code == 200) {
        treeRef.value.setCheckedKeys(res.data.data);
      }
    }
  }
);

onMounted(() => {
  initMenuList();
});
</script>

<style lang="less" scoped>
.buttons-container {
  margin-left: 23px;
  margin-bottom: 23px;
}
</style>